<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表格与表单标签应用示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #2c3e50, #3498db);
            color: white;
            padding: 40px 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.3rem;
            opacity: 0.9;
            font-weight: 300;
        }
        
        .content {
            padding: 40px;
        }
        
        .section {
            margin-bottom: 50px;
            padding: 30px;
            border-radius: 10px;
            background: #f8f9fa;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        h2 {
            color: #2c3e50;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid #3498db;
            font-size: 2rem;
        }
        
        h3 {
            color: #3498db;
            margin: 25px 0 15px;
            font-size: 1.5rem;
        }
        
        /* 表格样式 */
        .table-container {
            overflow-x: auto;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }
        
        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #e1e1e1;
        }
        
        th {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        tr:hover {
            background-color: #f8f9fa;
        }
        
        tr:nth-child(even) {
            background-color: #f5f7fa;
        }
        
        tr:nth-child(even):hover {
            background-color: #e8f4fc;
        }
        
        /* 表单样式 */
        .form-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="date"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e1e1e1;
            border-radius: 6px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        .radio-group, .checkbox-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .radio-item, .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        button {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 6px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
        }
        
        .button-group {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        
        .reset-btn {
            background: linear-gradient(135deg, #95a5a6, #7f8c8d);
        }
        
        .reset-btn:hover {
            box-shadow: 0 5px 15px rgba(149, 165, 166, 0.4);
        }
        
        .code-block {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        
        .tag {
            color: #e74c3c;
        }
        
        .attr {
            color: #3498db;
        }
        
        .value {
            color: #2ecc71;
        }
        
        footer {
            text-align: center;
            padding: 30px;
            background: #2c3e50;
            color: #ecf0f1;
            margin-top: 30px;
        }
        
        @media (max-width: 768px) {
            .content {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .radio-group, .checkbox-group {
                flex-direction: column;
                gap: 10px;
            }
            
            .button-group {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML表格与表单标签应用</h1>
            <p class="subtitle">掌握数据展示和用户交互的核心技术</p>
        </header>
        
        <div class="content">
            <!-- 表格部分 -->
            <div class="section">
                <h2>HTML表格标签应用</h2>
                
                <h3>基本表格结构</h3>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>年龄</th>
                                <th>城市</th>
                                <th>职业</th>
                                <th>薪资</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>张三</td>
                                <td>28</td>
                                <td>北京</td>
                                <td>前端工程师</td>
                                <td>¥15,000</td>
                            </tr>
                            <tr>
                                <td>李四</td>
                                <td>32</td>
                                <td>上海</td>
                                <td>产品经理</td>
                                <td>¥18,000</td>
                            </tr>
                            <tr>
                                <td>王五</td>
                                <td>25</td>
                                <td>深圳</td>
                                <td>UI设计师</td>
                                <td>¥12,000</td>
                            </tr>
                            <tr>
                                <td>赵六</td>
                                <td>30</td>
                                <td>杭州</td>
                                <td>后端工程师</td>
                                <td>¥16,000</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4" style="text-align: right; font-weight: bold;">平均薪资：</td>
                                <td style="font-weight: bold;">¥15,250</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                <h3>表格标签代码示例</h3>
                <div class="code-block">
                    <span class="tag">&lt;table&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;thead&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;tr&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;th&gt;</span>表头1<span class="tag">&lt;/th&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;th&gt;</span>表头2<span class="tag">&lt;/th&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/tr&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;/thead&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;tbody&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;tr&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;td&gt;</span>数据1<span class="tag">&lt;/td&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;td&gt;</span>数据2<span class="tag">&lt;/td&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/tr&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;/tbody&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;tfoot&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;tr&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;td&gt;</span>汇总数据<span class="tag">&lt;/td&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/tr&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;/tfoot&gt;</span><br>
                    <span class="tag">&lt;/table&gt;</span>
                </div>
                
                <div class="form-container">
                    <h4>表格标签的作用：</h4>
                    <ul style="padding-left: 20px; margin: 15px 0;">
                        <li><strong>&lt;table&gt;</strong>: 定义表格容器</li>
                        <li><strong>&lt;thead&gt;</strong>: 定义表头区域</li>
                        <li><strong>&lt;tbody&gt;</strong>: 定义表格主体内容</li>
                        <li><strong>&lt;tfoot&gt;</strong>: 定义表格页脚（汇总行）</li>
                        <li><strong>&lt;tr&gt;</strong>: 定义表格行</li>
                        <li><strong>&lt;th&gt;</strong>: 定义表头单元格</li>
                        <li><strong>&lt;td&gt;</strong>: 定义数据单元格</li>
                        <li><strong>colspan/rowspan</strong>: 合并单元格</li>
                    </ul>
                </div>
            </div>
            
            <!-- 表单部分 -->
            <div class="section">
                <h2>HTML表单标签应用</h2>
                
                <div class="form-container">
                    <h3>用户注册表单</h3>
                    
                    <form id="registrationForm">
                        <div class="form-group">
                            <label for="username">用户名：</label>
                            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">电子邮箱：</label>
                            <input type="email" id="email" name="email" placeholder="请输入电子邮箱" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="password">密码：</label>
                            <input type="password" id="password" name="password" placeholder="请输入密码" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="birthdate">出生日期：</label>
                            <input type="date" id="birthdate" name="birthdate">
                        </div>
                        
                        <div class="form-group">
                            <label>性别：</label>
                            <div class="radio-group">
                                <div class="radio-item">
                                    <input type="radio" id="male" name="gender" value="male">
                                    <label for="male">男</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="female" name="gender" value="female">
                                    <label for="female">女</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="other" name="gender" value="other">
                                    <label for="other">其他</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>兴趣爱好：</label>
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="sports" name="interests" value="sports">
                                    <label for="sports">运动</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="reading" name="interests" value="reading">
                                    <label for="reading">阅读</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="music" name="interests" value="music">
                                    <label for="music">音乐</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="travel" name="interests" value="travel">
                                    <label for="travel">旅行</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="country">国家：</label>
                            <select id="country" name="country">
                                <option value="">请选择国家</option>
                                <option value="china">中国</option>
                                <option value="usa">美国</option>
                                <option value="japan">日本</option>
                                <option value="korea">韩国</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="bio">个人简介：</label>
                            <textarea id="bio" name="bio" rows="4" placeholder="请简要介绍你自己..."></textarea>
                        </div>
                        
                        <div class="button-group">
                            <button type="submit">提交注册</button>
                            <button type="reset" class="reset-btn">重置表单</button>
                        </div>
                    </form>
                </div>
                
                <h3>表单标签代码示例</h3>
                <div class="code-block">
                    <span class="tag">&lt;form</span> <span class="attr">action=</span><span class="value">"/submit"</span> <span class="attr">method=</span><span class="value">"post"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;label</span> <span class="attr">for=</span><span class="value">"name"</span><span class="tag">&gt;</span>姓名：<span class="tag">&lt;/label&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;input</span> <span class="attr">type=</span><span class="value">"text"</span> <span class="attr">id=</span><span class="value">"name"</span> <span class="attr">name=</span><span class="value">"name"</span> <span class="attr">required</span><span class="tag">&gt;</span><br><br>
                    
                    &nbsp;&nbsp;<span class="tag">&lt;input</span> <span class="attr">type=</span><span class="value">"radio"</span> <span class="attr">id=</span><span class="value">"male"</span> <span class="attr">name=</span><span class="value">"gender"</span> <span class="attr">value=</span><span class="value">"male"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;label</span> <span class="attr">for=</span><span class="value">"male"</span><span class="tag">&gt;</span>男<span class="tag">&lt;/label&gt;</span><br><br>
                    
                    &nbsp;&nbsp;<span class="tag">&lt;select</span> <span class="attr">id=</span><span class="value">"country"</span> <span class="attr">name=</span><span class="value">"country"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;option</span> <span class="attr">value=</span><span class="value">"china"</span><span class="tag">&gt;</span>中国<span class="tag">&lt;/option&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;/select&gt;</span><br><br>
                    
                    &nbsp;&nbsp;<span class="tag">&lt;button</span> <span class="attr">type=</span><span class="value">"submit"</span><span class="tag">&gt;</span>提交<span class="tag">&lt;/button&gt;</span><br>
                    <span class="tag">&lt;/form&gt;</span>
                </div>
                
                <div class="form-container">
                    <h4>表单标签的作用：</h4>
                    <ul style="padding-left: 20px; margin: 15px 0;">
                        <li><strong>&lt;form&gt;</strong>: 定义表单容器，包含所有表单元素</li>
                        <li><strong>&lt;input&gt;</strong>: 多种类型的输入控件（文本、密码、单选、复选等）</li>
                        <li><strong>&lt;label&gt;</strong>: 为表单元素提供标签，提升可访问性</li>
                        <li><strong>&lt;select&gt;</strong>: 创建下拉选择框</li>
                        <li><strong>&lt;option&gt;</strong>: 定义下拉选项</li>
                        <li><strong>&lt;textarea&gt;</strong>: 多行文本输入区域</li>
                        <li><strong>&lt;button&gt;</strong>: 定义可点击的按钮</li>
                        <li><strong>required属性</strong>: 设置表单字段为必填项</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <footer>
            <p>HTML表格与表单标签应用示例 &copy; 2023 | 前端开发学习资源</p>
        </footer>
    </div>

    <script>
        // 简单的表单验证
        document.getElementById('registrationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;
            
            if (username && email) {
                alert('表单提交成功！\n用户名: ' + username + '\n邮箱: ' + email);
                this.reset();
            } else {
                alert('请填写所有必填字段！');
            }
        });
    </script>
</body>
</html>